<template>
  <div class="counter-component">
    <h3>{{ title }}</h3>
    <div class="component-content">
      <p class="count">计数: {{ counterStore.count }}</p>
      <p class="double">双倍: {{ counterStore.doubleCount }}</p>

      <div class="component-controls">
        <button @click="counterStore.increment()" class="btn-increment">+1</button>
        <button @click="counterStore.decrement()" class="btn-decrement">-1</button>
        <button @click="counterStore.reset()" class="btn-reset">重置</button>
      </div>

      <div class="component-info">
        <p>
          状态:
          <span v-if="counterStore.isPositive" class="status-positive">正数</span>
          <span v-else-if="counterStore.isNegative" class="status-negative">负数</span>
          <span v-else class="status-zero">零</span>
        </p>
        <p class="timestamp">更新时间: {{ timestamp }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useCounterStore } from '@/stores/counter'

const props = defineProps({
  title: {
    type: String,
    required: true
  }
})

const counterStore = useCounterStore()
const timestamp = ref(new Date().toLocaleTimeString())

// 监听计数变化，更新时间戳
watch(
  () => counterStore.count,
  () => {
    timestamp.value = new Date().toLocaleTimeString()
  }
)
</script>

<style scoped>
.counter-component {
  padding: 20px;
  border: 2px solid #4caf50;
  border-radius: 12px;
  background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.counter-component:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.counter-component h3 {
  margin: 0 0 15px 0;
  color: #2e7d32;
  text-align: center;
  font-size: 18px;
  border-bottom: 2px solid #4caf50;
  padding-bottom: 8px;
}

.component-content {
  text-align: center;
}

.count {
  font-size: 20px;
  font-weight: bold;
  color: #1b5e20;
  margin: 10px 0;
}

.double {
  font-size: 16px;
  color: #388e3c;
  margin: 5px 0 15px 0;
}

.component-controls {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 15px;
}

.component-controls button {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  transition: all 0.2s;
}

.btn-increment {
  background-color: #4caf50;
  color: white;
}

.btn-increment:hover {
  background-color: #45a049;
  transform: scale(1.05);
}

.btn-decrement {
  background-color: #f44336;
  color: white;
}

.btn-decrement:hover {
  background-color: #da190b;
  transform: scale(1.05);
}

.btn-reset {
  background-color: #ff9800;
  color: white;
}

.btn-reset:hover {
  background-color: #e68900;
  transform: scale(1.05);
}

.component-info {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #a5d6a7;
}

.component-info p {
  margin: 5px 0;
  font-size: 14px;
}

.status-positive {
  color: #4caf50;
  font-weight: bold;
}

.status-negative {
  color: #f44336;
  font-weight: bold;
}

.status-zero {
  color: #ff9800;
  font-weight: bold;
}

.timestamp {
  font-size: 12px;
  color: #666;
  font-style: italic;
}
</style>
